<template>
	<view class="main">
		<view class="swiper">
			<swiper class="swiper-list" :indicator-dots="indicatordots" interval="5000" :current="swiperCurrent"
				:autoplay="autoplay" :duration="duration" @change="swiperChange">
				<swiper-item v-for="(item, index) in swiperList" :key="index" style="background:#4b7ff9;">
					<view class="bgtop"></view>
					<view class="swiper-item">
						<view class="swiper-item-img swiper-item-img1">
							<image :src="item.imgUrl1" class="image-size" mode="widthFix"></image>
						</view>
						<view class="swiper-item-img swiper-item-img2">
							<image :src="item.imgUrl2" class="image-size" mode="widthFix"></image>
						</view>
					</view>
					<view class="bgbottom"></view>
				</swiper-item>
			</swiper>
			<!-- 轮播指示点样式修改 -->
			<view class="dots">
				<block v-for="(item,index) in swiperList.length" :key="item" v-if="swiperCurrent+1 < swiperLength">
					<view class="dot" :class="index==swiperCurrent ? ' active' : ''"></view>
				</block>
			</view>
			<view class="jumpover" @tap="launchFlag()" v-if="swiperCurrent+1 < swiperLength">{{ jumpover }}</view>
			<view class="experience" @tap="launchFlag()" v-if="swiperCurrent+1 == swiperLength">{{ experience }}</view>
		</view>
	</view>
</template>

<script>
	import { route } from '@/uni_modules/uview-plus';
	export default {
		data() {
			return {
				indicatordots: false,
				titleNViewBackground: '',
				swiperCurrent: 0,
				swiperLength: 0,
				swiperList: [{

						imgUrl1: '../../static/img/guide/yindao1_02.jpg',
						imgUrl2: '../../static/img/guide/yindao1_05.jpg'
					},

					{
						imgUrl1: '../../static/img/guide/yindao2_02.jpg',
						imgUrl2: '../../static/img/guide/yindao2_05.jpg'
					},
					{
						imgUrl1: '../../static/img/guide/yindao3_02.jpg',
						imgUrl2: '../../static/img/guide/yindao3_05.jpg'
					},
					{
						imgUrl1: '../../static/img/guide/yindao4_02.jpg',
						imgUrl2: '../../static/img/guide/yindao4_05.jpg'
					},
					{
						imgUrl1: '../../static/img/guide/yindao5_02.jpg',
						imgUrl2: '../../static/img/guide/yindao5_05.jpg'
					}
				],
				autoplay: false,
				duration: 500,
				jumpover: '跳过',
				experience: '立即体验'
			};
		},
		onLoad() {
			// console.log(2, this.swiperList)
			if (uni.getSystemInfoSync().platform === 'ios') {
				this.swiperList = this.swiperList.slice(1)
			}
			this.swiperLength = this.swiperList.length;
			// this.titleNViewBackground = this.swiperList[0].bgColor;
		},
		mounted() {
			// #ifdef APP-PLUS
			plus.navigator.closeSplashscreen();
			// #endif
		},
		methods: {
			//轮播图切换修改背景色
			swiperChange(e) {
				const index = e.detail.current;
				this.swiperCurrent = index;
				this.swiperLength = this.swiperList.length;
				// this.titleNViewBackground = this.swiperList[index].bgColor;
			},
			launchFlag: function() {
				/**
				 * 向本地存储中设置launchFlag的值，即启动标识；
				 */
				uni.setStorage({
					key: 'launchFlag',
					data: true
				});
				// uni.$u.switchTab({
				// 	url: '/pages/index/index'
				// });
				// route({
				// 	type:'tab',
				// 	url: 'pages/index/index',
				// })
				uni.reLaunch({
									url: '/pages/index/index'
								});
			}
		}
	};
</script>
<style lang="scss">
	page,
	.main {
		width: 100%;
		height: 100%;
		padding: 0;
		background-size: 100% auto;
	}

	view {
		/* uni-app默认使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。如不了解flex布局，请参考http://www.w3.org/TR/css3-flexbox/。若不需要flex布局可删除本行*/
		display: flex;
	}

	.main {
		flex: 1;
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		/*必须要设置成100%，不然如果有内容是横向排列的，则会看不到其它内容*/
		width: 100%;
	}

	.swiper {
		flex-direction: column;
		width: 100%;
		height: 100%;
		background: #fff;
	}

	.swiper-list {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 100%;
		text-align: center;
		justify-content: flex-start;
	}

	.swiper-item-img {
		width: 100%;
		height: auto;
		margin: 0 auto;
	}

	.swiper-item-img .image-size {
		width: 100%;
	}

	.swiper-item-img1 {
		margin-top: 140rpx;
	}

	.swiper-item-img1 .image-size {
		width: 100%;
	}

	.swiper-item-img2 {
		margin-top: 50rpx;
	}

	.jumpover,
	.experience {
		position: absolute;
		z-index: 999;
		height: 50rpx;
		line-height: 50rpx;
		padding: 0 40rpx;
		font-size: 28rpx;
		color: #fff;
		border: 2rpx solid #fff;
		border-radius: 30rpx;
	}

	.jumpover {
		right: 30rpx;
		top: 80rpx;
	}

	.experience {
		right: 50%;
		bottom: 150rpx;
		margin-right: -116rpx;
		background-color: #fff;
		color: #2F69E0;
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 60rpx;
		font-size: 30rpx;
	}

	.dots {
		position: absolute;
		bottom: 150rpx;
		right: 50%;
		margin-right: -80rpx;
		z-index: 4;
		display: flex;
		justify-content: center;
		background-color: #85a8f9;
		border-radius: 10rpx;

		.dot {
			width: 24rpx;
			height: 8rpx;
			transition: all .6s;
			background: #85a8f9;
			border-radius: 10rpx;
		}

		.active {
			width: 48rpx;
			height: 8rpx;
			background: #fff;
		}
	}

	.bgtop {
		background: url(../../static/img/guide/bgtop.png) no-repeat;
		background-size: 100%;
		height: 110rpx;
		width: 130rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.bgbottom {
		background: url(../../static/img/guide/bgbottom.png) no-repeat;
		background-size: 100%;
		height: 110rpx;
		width: 127rpx;
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 999;
	}
</style>